<template>
  <el-container class="main_container">
    <!--头部布局-->
    <el-header>
      <!--logo和项目名称-->
      <div class="left_box">
        <img src="../assets/img/timg.gif" alt="">
        <span>新冠物资管理系统</span>
      </div>
      <!--登录后显示的头像信息-->
      <div class="right_box">
        <el-dropdown>
          <img src="../assets/img/timg.gif" alt="">
          <!--下拉菜单-->
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-house">系统首页</el-dropdown-item>
            <el-dropdown-item icon="el-icon-ship">交流讨论</el-dropdown-item>
            <el-dropdown-item icon="el-icon-switch-button">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <!--侧边栏布局-->
    <el-container>

      <el-aside :width="isCollapse?'64px':'200px'">
        <!--展开或收起-->
        <div class="toggle_box" @click="toggleCollapse()">
          |||
        </div>

        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#272c33"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="isCollapse"
          :unique-opened="true"
          :collapse-transition="false"
          :router="true"
          :default-active="activePath">
          <MenuTree :menuTree="this.menuList"/>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import MenuTree from '../components/MenuTree';

  export default {
    name: 'Main',
    components: { MenuTree },
    data () {
      return {
        isCollapse: false,
        menuList: [
          {
            'id': 1,
            'parentId': 0,
            'menuName': '系统管理',
            'url': '',
            'icon': 'el-icon-setting',
            'orderNum': 1,
            'open': 1,
            'disabled': false,
            'perms': null,
            'type': 0,
            'children': [
              {
                'id': 226,
                'parentId': 1,
                'menuName': '用户管理',
                'url': '/users',
                'icon': 'el-icon-user',
                'orderNum': 2,
                'open': 0,
                'disabled': false,
                'perms': 'users',
                'type': 0,
                'children': []
              },
              {
                'id': 235,
                'parentId': 1,
                'menuName': '角色管理',
                'url': '/roles',
                'icon': 'el-icon-postcard',
                'orderNum': 3,
                'open': 0,
                'disabled': false,
                'perms': 'roles',
                'type': 0,
                'children': []
              },
              {
                'id': 261,
                'parentId': 1,
                'menuName': '部门管理',
                'url': '/department',
                'icon': 'el-icon-s-home',
                'orderNum': 3,
                'open': 0,
                'disabled': false,
                'perms': '',
                'type': 0,
                'children': []
              },
            ]
          },
          {
            'id': 312,
            'parentId': 0,
            'menuName': '业务管理',
            'url': null,
            'icon': 'el-icon-s-goods',
            'orderNum': 2,
            'open': 0,
            'disabled': false,
            'perms': null,
            'type': 0,
            'children': [
              {
                'id': 230,
                'parentId': 229,
                'menuName': '入库管理',
                'url': '/inStock',
                'icon': 'el-icon-coordinate',
                'orderNum': 1,
                'open': 1,
                'disabled': false,
                'perms': 'inStock',
                'type': 0,
                'children': []
              },
              {
                'id': 326,
                'parentId': 230,
                'menuName': '入库登记',
                'url': '/inStockLogin',
                'icon': 'el-icon-coordinate',
                'orderNum': 1,
                'open': 0,
                'disabled': false,
                'perms': null,
                'type': 0,
              },
              {
                'id': 888,
                'parentId': 230,
                'menuName': '出库管理',
                'url': '/outStock',
                'icon': 'el-icon-coordinate',
                'orderNum': 1,
                'open': 0,
                'disabled': false,
                'perms': 'inStock',
                'type': 0,
                'children': [

                ]
              },
              {
                'id': 229,
                'parentId': 312,
                'menuName': '物资管理',
                'url': '',
                'icon': 'el-icon-date',
                'orderNum': 1,
                'open': 1,
                'disabled': false,
                'perms': 'el-icon-date',
                'type': 0,
                'children': [
                ]
              },{
                'id': 316,
                'parentId': 229,
                'menuName': '申请管理',
                'url': '/applyFor',
                'icon': 'el-icon-tickets',
                'orderNum': 5,
                'open': 0,
                'disabled': false,
                'perms': '',
                'type': 0,
                'children': []
              }, {
                'id': 311,
                'parentId': 312,
                'menuName': '物资流向',
                'url': null,
                'icon': 'el-icon-edit',
                'orderNum': 3,
                'open': 0,
                'disabled': false,
                'perms': null,
                'type': 0,
                'children': [
                  {
                    'id': 310,
                    'parentId': 311,
                    'menuName': '物资去处',
                    'url': '/consumers',
                    'icon': 'el-icon-edit',
                    'orderNum': 1,
                    'open': 0,
                    'disabled': false,
                    'perms': '',
                    'type': 0,
                    'children': []
                  },{
                    'id': 269,
                    'parentId': 311,
                    'menuName': '物资来源',
                    'url': '/suppliers',
                    'icon': 'el-icon-coordinate',
                    'orderNum': 5,
                    'open': 0,
                    'disabled': false,
                    'perms': '',
                    'type': 0,
                    'children': []
                  }
                ]
              }
            ]
          },
          {
            'id': 303,
            'parentId': 0,
            'menuName': '健康报备',
            'url': '',
            'icon': 'el-icon-platform-eleme',
            'orderNum': 3,
            'open': 0,
            'disabled': false,
            'perms': '',
            'type': 0,
            'children': [
              {
                'id': 273,
                'parentId': 303,
                'menuName': '全国疫情',
                'url': '/map',
                'icon': 'el-icon-s-opportunity',
                'orderNum': 1,
                'open': 1,
                'disabled': false,
                'perms': 'map:view',
                'type': 0,
                'children': []
              },
              {
                'id': 304,
                'parentId': 303,
                'menuName': '健康打卡',
                'url': '/health',
                'icon': 'el-icon-s-cooperation',
                'orderNum': 1,
                'open': 0,
                'disabled': false,
                'perms': 'health',
                'type': 0,
                'children': []
              },
              {
                'id': 305,
                'parentId': 303,
                'menuName': '查看情况',
                'url': null,
                'icon': 'el-icon-c-scale-to-original',
                'orderNum': 2,
                'open': 1,
                'disabled': false,
                'perms': null,
                'type': 0,
                'children': []
              },
              {
                'id': 272,
                'parentId': 303,
                'menuName': '疫情辟谣',
                'url': '/rumors',
                'icon': 'el-icon-help',
                'orderNum': 5,
                'open': 0,
                'disabled': false,
                'perms': null,
                'type': 0,
                'children': []
              }
            ]
          },
          {
            'id': 295,
            'parentId': 0,
            'menuName': '其他管理',
            'url': '',
            'icon': 'el-icon-s-marketing',
            'orderNum': 5,
            'open': 0,
            'disabled': false,
            'perms': '',
            'type': 0,
            'children': [
              {
                'id': 297,
                'parentId': 295,
                'menuName': '监控管理',
                'url': '',
                'icon': 'el-icon-warning',
                'orderNum': 1,
                'open': 0,
                'disabled': false,
                'perms': '',
                'type': 0,
                'children': [
                  {
                    'id': 298,
                    'parentId': 297,
                    'menuName': 'SQL监控',
                    'url': '/druid',
                    'icon': 'el-icon-view',
                    'orderNum': 1,
                    'open': 0,
                    'disabled': false,
                    'perms': null,
                    'type': 0,
                    'children': []
                  }
                ]
              },
              {
                'id': 341,
                'parentId': 295,
                'menuName': '个人博客',
                'url': '/blog',
                'icon': 'el-icon-view',
                'orderNum': 1,
                'open': 0,
                'disabled': false,
                'perms': '',
                'type': 0,
                'children': []
              },
              {
                'id': 296,
                'parentId': 295,
                'menuName': 'swagger文档',
                'url': '/swagger',
                'icon': 'el-icon-document',
                'orderNum': 2,
                'open': 0,
                'disabled': false,
                'perms': null,
                'type': 0,
                'children': []
              },
              {
                'id': 318,
                'parentId': 295,
                'menuName': '图标管理',
                'url': '/icons',
                'icon': 'el-icon-star-off',
                'orderNum': 2,
                'open': 1,
                'disabled': false,
                'perms': '',
                'type': 0,
                'children': []
              }
            ]
          },
          {
            'id': 5,
            'parentId': 0,
            'menuName': '日志管理',
            'url': '/logs',
            'icon': 'el-icon-camera',
            'orderNum': 6,
            'open': 0,
            'disabled': false,
            'perms': null,
            'type': 0,
            'children': [
              {
                'id': 271,
                'parentId': 5,
                'menuName': '登入日志',
                'url': '/loginLog',
                'icon': 'el-icon-date',
                'orderNum': 1,
                'open': 0,
                'disabled': false,
                'perms': 'login:log',
                'type': 0,
                'children': []
              },
              {
                'id': 307,
                'parentId': 5,
                'menuName': '操作日志',
                'url': '/logs',
                'icon': 'el-icon-edit',
                'orderNum': 1,
                'open': 1,
                'disabled': false,
                'perms': '',
                'type': 0,
                'children': []
              }
            ]
          }
        ],
        activePath: '',
      }
    },
    comments: {
      MenuTree
    },
    methods: {
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    }
  }
</script>

<style scoped>
  /*头部样式*/
  .el-header {
    background-color: #272c33;
    display: flex;
    padding-left: 0;
    justify-content: space-between;
    color: #FFFFFF;
    align-items: center;
  }

  /*头部左边样式*/
  .left_box {
    display: flex;
    align-items: center;
  }

  /*头部左边logo样式*/
  .left_box img {
    width: 60px;
    height: 60px;
    margin: 0px 0px 10px 15px;
  }

  /*头部左边标题样式*/
  .left_box span {
    margin-left: 15px;
  }

  /*头部右边头像样式*/
  .right_box .el-dropdown img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #FFFFFF;
    margin: 0px 15px 0px 0px;
    background-size: contain;
  }

  /*侧边栏样式*/
  .el-aside {
    background-color: #272c33;
  }

  .el-menu {
    border-right: none;
  }

  /*侧边栏展开或收起样式*/
  .toggle_box {
    background-color: chartreuse;
    font-size: 15px;
    font-weight: bold;
    line-height: 25px;
    color: #FFFFFF;
    letter-spacing: 0.3em;
    text-align: center;
    cursor: pointer;
  }

  /*主体内容样式*/
  .el-main {
    background-color: #E9EEF3;
  }

  /*设置容器为100%大小*/
  .main_container {
    height: 100%;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
</style>
